<template>
  <el-dialog
    :append-to-body="true"
    :show-close="true"
    :title="dialog.title"
    :visible.sync="dialog.show"
    @close="handleClose"
  >
    <el-table :data="mallOrderItem">
      <el-table-column type="index" width="50"/>
      <el-table-column label="SKU编码" property="skuCode" width="200"/>
      <el-table-column label="SKU名称" property="skuName" width="220"/>
      <el-table-column label="数量" property="amount"/>
      <el-table-column label="实销单价">
        <template slot-scope="scope">
          <span>{{ scope.row.payPrice===null? "--" :('￥ ' + (scope.row.amount? (scope.row.payPrice.toFixed(2)/scope.row.amount): scope.row.payPrice.toFixed(2))) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="实销小计" property="payPrice">
        <template slot-scope="scope">
          <span>{{ scope.row.payPrice===null? "--" :('￥ ' + (scope.row.payPrice.toFixed(2))) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="采购公司" property="purchaseCompany"/>
    </el-table>
  </el-dialog>
</template>

<style>
</style>

<script>
import { queryListDetail } from '@/api/pas/mallOrder'
export default {
  props: {
    // 父组件调用时传进来的参数
    modalData: {
      // 必须提供字段
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialog: {
        show: true,
        title: ''
      },
      search: {
        otherRemark: ''
      },
      mallOrderItem: []
    }
  },
  created() {
    this.dialog.title = 'SKU明细信息'
    this.initPageInfo()
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    initPageInfo() {
      const self = this
      if (self.modalData) {
        self.search.otherRemark = self.modalData.businessNumber
        queryListDetail(self.search)
          .then(response => {
            if (response.data.status === 'success') {
              self.mallOrderItem = response.data.data.mallOrderItemList
            } else {
              self.$message({
                message: 'SKU明细信息加载失败' + response.data.messge,
                type: 'warning'
              })
            }
          })
          .catch(() => {
            self.$message({
              type: 'info',
              message: '网络请求失败'
            })
          })
      } else {
        self.mallOrderItem = []
      }
    }
  }
}
</script>

